寫 UI 是精緻手工業

隨著軟體開發的演進，應用程式架構也跟著愈來愈精細。但不論架構再怎麼切分，UI（User Interface，應用程式介面）永遠都佔據著一塊難以切割、不可取代的部份。

為了開發跨平台 UI，各開發生態系可謂費盡了苦心。以 Java 生態系為例，早期先有 AWT（Abstract Window Toolkit）讓開發者可以寫 UI。隨著使用者對 UI 的要求愈來愈高，再推出 100% 以 Java 實作的 Swing，除模擬出各平台的 UI 樣式，還提供更多、更複雜的 UI 元件供開發者使用。然而在開發範式改變後，JavaFX 以 CSS/FXML 為核心的設計成為 Swing 的繼任者。在 Kotlin 展露頭角後，Kotlin 派的開發者希望 UI 語法可以像 Kotlin 一樣簡潔，把 JavaFX 包了一層後做出 TornadoFX。

還記得筆者早期是從 Flash/ActionScript 這個幾乎已被世人遺忘的技術下手，先在 Photoshop 裡「畫」好 UI，再逐圖層輸出匯入 Flash 製作元件，再以 ActionScript 綁定元件後，以程式碼撰寫動畫及事件互動。近期研究 Android 開發時，發現 Mobile UI 也是先以 XML 定義好 UI 元件，再以 Kotlin 語法控制元件，加上動畫與事件互動，可謂殊途同歸。

這就讓筆者想起，每每為了做到設計師所謂的「Pixel Perfect」，開發者總是費盡苦心，「用程式碼寫/畫 UI」衍然變成精緻手工業。

Jetpack Compose 問市

Android 開發者一直在追求更現代的 UI 開發方式 - Declarative（宣告式）UI，期待能讓 UI 開發能方便預覽、兼顧可測試性及跨平台。其實 Declarative UI 的觀念並不新，從早先 JavaScript 生態的 React、iOS 平台上的 SwiftUI，到近期開發跨平台 Mobile 很熱門的 Flutter 都是採用這種範式來開發 UI。

Android 團隊看上這樣的趨勢，在全面轉用 Kotlin 做為主力開發語言後，接著再以 100% 的 Kotlin 開發 Jetpack Compose，讓 Android 開發者能以 Declarative UI 的方式開發 Mobile UI。

Compose for Desktop 接力上市

既然 Jetpack Compose 是以 100% 的 Kotlin 開發，又盡力降低其與 Android 平台的耦合，加上 Kotlin 是一個多平台語言，那是不是代表 Jetpack Compose 也能跨到其他平台使用呢？

沒錯！Compose 也能寫 Desktop 和 Web UI！

在 Android 團隊開發 Jetpack Compose 的同時，JetBrains 團隊除了給予 Kotlin 語言層面的支援外，兩方團隊也積極的同步合作，由 JetBrains 團隊將 Jetpack Compose 移植到 Desktop 及 Web 領域，創立了 Compose Multiplatform 計劃，其中包括了 Compose for Desktop 及 Compose for Web 兩個專案，讓開發者能以近似的語法，在多個平台上實作出相同樣式的 UI。

傳教士的 UI 開發耕讀筆記

由於筆者平時重心放在後端開發領域較多，隨著主力語言換到 Kotlin 後，對 Kotlin 多平台開發逐漸產生興趣，既然 Compose 也能寫 Desktop UI，一時技癢，決定趁著鐵人賽的季節重操舊業，利用 30 天的時間，從零開始自學 Compose for Desktop，試著重新上手幾近遺忘的精緻手工技術，並留下讀書筆記與同好共賞，預計會討論以下這些主題：

• 建置開發環境
• UI 元件綜覽
• 狀態管理
• 互動與事件
• 動畫
• UI 測試
• 發佈

準備好了嗎？跟我一起踏上探索 Compose for Desktop 的旅程吧！